<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.min.css">

		<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/libs/hls.min.1.1.6.js"></script>
		<!-- <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/libs/flv.min.1.6.3.js"></script> -->
		<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
		<style>
			#player-container {
				width: 100%;
				height: 100%;
				background-color: #100d34;
			}

			body {
				margin: 0px;
				padding: 0px;
				/* margin-top: 30px; */
			}

			.videos {
				width: 100%;
				height: 100%;
			}
		</style>
		<!-- <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
	</head>
	<body>
		<div id="player-container"></div>
	</body>
</html>
<script>
	// document.addEventListener('UniAppJSBridgeReady', function() {
	// })
	console.log('开始渲染直播')
	var player;
	var _url = getQueryString("url");
	//alert(_url)
	//if (!_url || _url.length == 0) {}
	_url = decodeURIComponent(_url)
	init(_url)

	function init(url) {
		try {
			const playerId = 'player-' + Math.floor(Math.random() * 1000).toString()
			const video = document.createElement("video")
			video.className = 'videos'
			video.setAttribute("id", playerId)
			video.setAttribute('preload', 'auto')
			video.setAttribute('playsinline', true)
			video.setAttribute('webkit-playsinline', true)
			video.setAttribute('x5-playsinline', true)
			//video.setAttribute('autoplay', true)
			document.getElementById("player-container").appendChild(video)
			var sources = [url]
			if (url.indexOf('|') > -1) {
				sources = url.split('|')
			}

			console.log('live sources', sources)

			player = TCPlayer(playerId, {
				autoplay: true, // 是否自动播放
				controls: true, //是否显示播放器的控制栏
				//muted: true, //是否静音播放
				controlBar: {
					playbackRateMenuButton: false, //是否显示播放速率选择按钮。
					volumePanel: true,
					durationDisplay: false,
					currentTimeDisplay: false,
					timeDivider: false,
					volumePanel: false,
					progressControl: false,
					fullscreenToggle: false,
					QualitySwitcherMenuButton: true
				},
				sources: sources,
			})
			player.on('error', function(error) {
				console.error('播放错误', error)
			});

			player.ready(() => {
				console.log('播放ready')
			})


		} catch (e) {
			console.error('播放异常', e)
		}
	}

	function getQueryString(name) {
		var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
		var r = window.location.search.substr(1).match(reg);
		if (r != null) {
			return unescape(r[2]);
		}
		return null;
	}
</script>